<template>
    <div class="com-cnt">
        <i-swiper :items="data.imagesList">
            <template slot-scope="data">
                <span
                class="swiper-img"
                :style="{backgroundImage:'url('+data.src+')'}"
                >
                </span>     
            </template>
        </i-swiper>
        <h2 class="title">{{data.title}}</h2>
        <p class="price">￥{{data.price}}</p>
        <cnt-com>
            <ul class="tab-cnt">
                <li
                 v-for="(item, index) in arrInfo"
                 :key="index"
                 @click="changeCom(index)"
                 class="item"
                 :class="index%2 == 0 ? 'border-right' : ''"
                >
                    <span :class="iNow == index ? 'cur' : ''" class="txt">{{item}}</span>
                </li>
            </ul>
        </cnt-com>
        <fade-animation :fadename="fadename">
            <component :data="comItemData" :is="currentTabComponent"></component>
        </fade-animation>
        <div @click="applyDo" class="btn-fix">立即报名</div>
    </div>
</template>

<script>
    import ISwiper from '@/common/swiper/swiper.vue'
    import CntCom from '@/common/cnt/Cnt.vue'
    import axios from 'axios'
    import Qs from 'qs'
    import { maskTips, maskCallback } from '@/assets/js/dom'   
    import BComponent from './component/tips' 
    import AComponent from './component/detail' 
    import FadeAnimation from '@/common/fade/FadeAnimation.vue'
    export default {
        name: "travelDetailpage",
        components: {
            ISwiper,
            CntCom,
            FadeAnimation
        },
        data ( ) {
            return {
                userid: (function(){
                    return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
                })(),                
                data: {},
                iNow: 0,
                arrInfo: ['产品详情', '费用详情'],
                currentTabComponent: AComponent,
                comItemData: '',
                fadename: 'slide-left'
            }
        },
        mounted() {            
            this.doAjax()
            let self = this
            maskCallback(function(){
                self.$router.push('/center?source=2')
            }, 'comp-mask-btnAleft-travel','comp-mask-btnAright')
            maskCallback(function(){
                self.$router.push('/')
            }, 'comp-mask-btnAleft-suc-travel')            
        },  
        computed: {
            id ( ) {
                return this.$route.path.split('/')[2]
            }
        },      
        methods: {   
            applyDo ( ) {
                let self = this            
                axios({
                    url: '/xshk/f/user/addTour',
                    method:'post',
                    headers:{'Content-Type':'application/x-www-form-urlencoded'},
                    data: Qs.stringify({
                        'tourId': self.id,
                        'userid':  self.userid
                    })
                }).then( res => {self.handleApplySucc( res )}).catch( err => {self.handleGetDataFail( err )}) 
            },
            handleApplySucc ( res ) {
                res = res.data
                if ( res && res.code == 0 ) {
                    maskTips({id:"axios-tips-suc-travel",title:'温馨提示',btnCls: 'comp-mask-btnAleft-suc-travel',btnTxt:'确认',txt:'稍后工作人员将与您电话联系，请您保持电话畅通！'}) 
                }else{
                    //未登录                 
                    maskTips({id:"axios-tips-fail_"+ new Date().getTime(),title:'温馨提示',btnCls: 'comp-mask-btnAleft-travel',btnTxt:'确认',btnTxt2:'取消',txt: res.message })                    
                }                
            },            
            changeCom ( i ) {
                this.iNow = i
                if ( i == 0 ) {
                    this.fadename = 'slide-left'
                    this.currentTabComponent = AComponent
                    this.comItemData = this.data.tourDetails
                }else {
                    this.currentTabComponent = BComponent
                    this.comItemData = this.data.expenseKnow
                    this.fadename = 'slide-right'
                }
            },
            doAjax ( ) {
                let self = this            
                axios({
                    url: '/xshk/f/tour_add_view',
                    method:'post',
                    headers:{'Content-Type':'application/x-www-form-urlencoded'},
                    data: Qs.stringify({'id': self.id})
                }).then( res => {self.handleGetDataSucc( res )}).catch( err => {self.handleGetDataFail( err )})         
            }, 
            handleGetDataSucc ( res ) {
                res = res.data
                let self = this
                if ( res && res.code == 0 ) {
                    let data = res.data
                    self.data =  data
                    self.comItemData = data.tourDetails
                }
            },
            handleGetDataFail ( err ) {
                console(err)
                maskTips({id:"axios-tips-fail",txt:'网络通信失败!'})
            }                   
        }        
    }
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/mixins.styl'
.com-cnt
    width 100%
    height auto 
    padding-bottom 45px
    overflow hidden
    .swiper-img
        width 100%
        display block
        overflow hidden
        padding-bottom  46.66666666666667%
        background-repeat no-repeat
        background-position center
        background-size cover
    .title 
        width 100%
        padding 0 10px
        box-sizing border-box
        font-size 20px
        font-weight bold 
        line-height 50px
        height 40px
        ellipsis()
    .price 
        width 100%
        height 25px
        padding 0 10px
        line-height 25px
        font-size 16px
        color red 
        ellipsis()
    .tab-cnt 
        width 100%
        height 50px
        line-height 30px 
        padding 10px
        box-sizing border-box
        font-size 16px
        color #333
        text-align center
        display flex
        overflow hidden
        .item 
            flex 1
            height 100%
            .txt 
                position relative
            .cur
                color #f8a120
                &:before 
                    position absolute 
                    left 50%
                    bottom -5px
                    content ""
                    display block 
                    transform translate(-50%,0)
                    width 50%
                    height 1px
                    background-color #f8a120
    .btn-fix 
        width 100%
        height 45px
        line-height 45px
        text-align center 
        font-size 16px
        color #fff
        background-color #ffd351
        position fixed
        left 0
        bottom 0
</style>